<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>WebSocket Chat</title>
</head>

<body>

	<script type="text/javascript">
		var socket;
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		function connect() {
			if (document.getElementById('btnconn').value === "断开") {
				disconnect();
			} else {
				var addreses = document.getElementById('address').value;

				setChatContent("开始连接!" + addreses);
				// addreses = "ws://127.0.0.1:96/api/chat?name=xjh2&to=xjh1";
				if (window.WebSocket) {
					socket = new WebSocket(addreses);
					//连接开启时
					socket.onopen = function (event) {
						setChatContent("连接开启!");

						document.getElementById('btnconn').value = "断开"
					};
					//连接关闭时
					socket.onclose = function (event) {
						setChatContent("与服务器的连接已断开。" + event.data);

						document.getElementById('btnconn').value = "连接"
					};
					//发生错误时
					socket.onerror = function (event) {
						setChatContent("发生错误:" + event.data);
					};
					//收到信息时
					socket.onmessage = function (event) {
						setChatContent(event.data);
					};
				} else {
					setChatContent("浏览器不支持 WebSocket！");
				}
			}
		};

		function setChatContent(data) {
			if (!data) {
				return;
			}
			var ta = document.getElementById('chatContent');
			ta.value = ta.value + '\n' + data
			//var Html = '<p>' + data + '</p>';
			//ta.innerHTML += Html;
		};

		function disconnect() {
			if (!window.WebSocket) {
				return;
			}
			if (socket && socket.readyState == WebSocket.OPEN) {
				socket.close();
			}
		};


		function send(message) {
			if (!window.WebSocket) {
				return;
			}
			if (socket.readyState == WebSocket.OPEN) {
				socket.send(message);
			} else {
				setChatContent("连接没有开启.");
			}
		}
	</script>
	<form onsubmit="return false;" style="width: 100%; height: 100%;">
		<h1>WebSocket聊天室</h1>
		<input type="text" id="address" value="ws://127.0.0.1:6002/page_room" style="width: 400px" />
		<input type="button" id="btnconn" value="连接" onclick="connect()" />

		<textarea id="chatContent" style="width: 100%; height: 500px;"></textarea>
		<!--<div id="chatContent" style="width: 100%; height: 100%;"></div>-->

		<hr />
		<input type="text" name="message" style="width: 300px" />
		<input type="button" value="发送消息" onclick="send(this.form.message.value)" />
		<input type="button" onclick="javascript:document.getElementById('chatContent').value=''" value="清空记录" />
	</form>
</body>
</html>